<template>
  <div>
    <swiper :key="datalist.length">
      <div class="swiper-slide"
           v-for="data in datalist"
           :key="data.bannerId"
           >
        <img class="img" :src="data.imgUrl"/>
      </div>
    </swiper>
    <filmtabbar></filmtabbar>
    <!-- 路由容器(基于slot封装) -->
    <router-view></router-view>
  </div>
</template>

<script>
import http from '@/util/http'
import filmtabbar from '@/components/FilmTabbar'
import swiper from '@/components/Swiper'
export default {
  data () {
    return {
      datalist: []
    }
  },
  components: {
    filmtabbar,
    swiper
  },
  mounted () {
    http.request({
      url: '/gateway?type=2&cityId=310100&k=3529285',
      headers: {
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      this.datalist = [...res.data.data]
    })
  }
}
</script>

<style lang="scss" scoped>
  .swiper-slide{
    height: 200px;
    .img{
      width: 100%;
    }
  }
</style>
